.grid-row-1{
    display: grid;
    grid-template-rows: repeat(1,1fr);
    grid-template-columns: repeat(12,1fr);
    gap: 8px;
}

/* 一整行 */
.grid-col-12{
    grid-area: 1/1/span 1/span 12;
}

/* 一行二等分 */
.grid-col-two:nth-child(1){
    grid-area: 1/1/span 1/span 6;
}
.grid-col-two:nth-child(2){
    grid-area: 1/7/span 1/span 6;
}

/* 一行三等分 */
.grid-col-three:nth-child(1){
    grid-area: 1/1/span 1/span 4;
}
.grid-col-three:nth-child(2){
    grid-area: 1/5/span 1/span 4;
}
.grid-col-three:nth-child(3){
    grid-area: 1/9/span 1/span 4;
}


/* 一行四等分 */
.grid-col-four:nth-child(1){
    grid-area: 1/1/span 1/span 3;
}
.grid-col-four:nth-child(2){
    grid-area: 1/4/span 1/span 3;
}
.grid-col-four:nth-child(3){
    grid-area: 1/7/span 1/span 3;
}
.grid-col-four:nth-child(4){
    grid-area: 1/10/span 1/span 3;
}

/* 2*2布局 */
.grid-2ride2{
    display: grid;
    grid-template-rows: repeat(2,1fr);
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
}
/* 3*3布局 */
.grid-3ride3{
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}
/* 4*4布局 */
.grid-4ride4{
    display: grid;
    grid-template-rows: repeat(4,1fr);
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
}